<style scoped="scoped">
  .print-container {
    margin-left: 55px;
  }
</style>
<template>
  <div>
    <el-dialog
      title=""
      width="900px"
      :visible.sync="showModal"
      center
    >
      <div class="print-container">
        <div class="print-header" style="width: 750px;height: 36px;text-align: center">
          <h2 style="margin: 0">盘点清单</h2>
        </div>
        <div class="print-content" style="width: 750px">
          <table style="width: 100%;border-collapse:collapse;line-height: 50px">
            <tr>
              <td width="70">盘点仓库:</td>
              <td width="112">{{detail.inventoryWarehouseName}}</td>
              <td width="70">盘点区域:</td>
              <td width="134">{{detail.inventoryDistrict}}</td>
              <td width="60">创建人:</td>
              <td width="110">{{detail.founderName}}</td>
              <td width="70">创建时间:</td>
              <td width="124">{{detail.foundtime | unixTimestampFilter('YYYY-MM-DD HH:mm')}}</td>
            </tr>
          </table>
          <!--共10列单列宽度75px-->
          <table width="100%" style="width: 100%;border-collapse:collapse;">
            <tr>
              <th :style="tableOne1">序号</th>
              <!--<th width="80" :style="tableOne1">盘点区域</th>-->
              <th :style="tableOne1">所属商家</th>
              <th :style="tableOne1">产品编号</th>
              <th width="160" :style="tableOne1">所属产品</th>
              <th :style="tableOne1">包件编号</th>
              <th :style="tableOne1">包件名称</th>
              <th :style="tableOne1">库存包件</th>
              <th :style="tableOne1">实际包件</th>
              <th width="40" :style="tableOne1">责任人</th>
            </tr>
            <tr v-for="(item, index) in tableData" :key="index">
              <td :style="tableOne1">{{index + 1}}</td>
              <!--<td :style="tableOne1">{{item.regionName}}</td>-->
              <td :style="tableOne1">{{item.cargoOwnerName}}</td>
              <td :style="tableOne1">{{item.productNo}}</td>
              <td :style="tableOne1">{{item.productName}}</td>
              <td :style="tableOne1">{{item.packageCode}}</td>
              <td :style="tableOne1">{{item.packageName}}</td>
              <td :style="tableOne1">{{item.realityNum}}</td>
              <td :style="tableOne1">{{item.inventoryRealityNum}}</td>
              <td :style="tableOne1">{{item.dutyMan}}</td>
            </tr>
          </table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="print()">打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop, validateLODOP} from '@/utils'
import {unixTimestampFilter, filterDataBaseDictionary, decimalNumFilter} from '@/filters'
let LODOP = null
export default {
  name: 'PrintModal',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    detail: {
      type: Object,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary,
    decimalNumFilter
  },
  data() {
    return {
      showModal: false,
      tableOne1: 'text-align: center;border: 1px solid #666;padding: 1px 4px;'
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  mounted() {},
  methods: {
    show() {
      this.showModal = true
    },
    hide() {
      this.showModal = false
    },
    print() {
      if (validateLODOP(LODOP)) {
        let html = $(this.$el).find('.print-container').html()
        LODOP.ADD_PRINT_HTM('0.5mm', '2mm', '218mm', '290mm', html)
        LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
      }
    }
  }
}
</script>
